import {StateType,LoginParamsType} from '@/interface/index'
import { Alert } from 'antd';
import React, { useState ,} from 'react';
import { connect, Dispatch,Link} from 'umi';
import { ConnectState } from '@/models/connect';
import LoginForm from './components/Login';


const { Tab, UserName, Mobile, Captcha,Password, Submit } = LoginForm;
interface LoginProps {
  dispatch: Dispatch;
  Login: StateType;
  submitting?: boolean;
}

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC<LoginProps> = (props) => {
  const { Login = {}, submitting } = props;
  const { status, type: loginType } = Login;
  // const [autoLogin, setAutoLogin] = useState(true);
  const [type, setType] = useState<string>('account');

  //发送
  const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({ 
      type: 'login/login',
      payload: { ...values, type },
    });
  };




  return (
    <div  >
      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
        <Tab key="account" tab="账号登录">
          {status === 'error' && loginType === 'account' && !submitting && (
            <LoginMessage content="账号或密码错误（admin/ant.design）" />
          )}
          <UserName
            name="userName"
            placeholder=" 请输入账号"
            rules={[
              {
                required: true,
                message: '请输入正确的账号!',
              },
            ]}
          />
          <Password
            name="password"
            placeholder=" 请输入密码"
            rules={[
              {
                required: true,
                message: '请输入正确的密码！',
              },
            ]}
          />
        </Tab> 
        <div>
        <Link to='/user/verify'> 
        忘记密码
       </Link>
        </div>
        <Submit loading={submitting}
        >登录</Submit>
      </LoginForm>
    </div>
  );
};

// export default connect(({ login, loading }: ConnectState) => ({
//   Login: login,
//   submitting: loading.effects['login/login'],
// }))(Login);
export default connect(
  ({
    Login,
    loading,
  }: {
    Login: StateType;
    loading: {
      effects: {
        [key: string]: boolean;
      };
    };
  }) => ({
    Login,
    submitting: loading.effects['login/login'],
  }),
)(Login);